{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/select/macro.njk" import govukSelect %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}

{% extends "layouts/examples.njk" %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
<form action="/" method="post" style="margin-bottom: 100vh;">

  {{ govukErrorSummary({
    "titleText": "There is a problem",
    "classes": "optional-extra-class",
    "errorList": [
      {
        "text": "Problem with input",
        "href": "#input"
      },
      {
        "text": "Problem with textarea",
        "href": "#textarea"
      },
      {
        "text": "Problem with select",
        "href": "#select"
      },
      {
        "text": "Problem with date input",
        "href": "#dateinput-day"
      },
      {
        "text": "Problem with date input year",
        "href": "#dateinput2-year"
      },
      {
        "text": "Problem with file",
        "href": "#file"
      },
      {
        "text": "Problem with file (enhanced)",
        "href": "#file-enhanced"
      },
      {
        "text": "Problem with radios",
        "href": "#radios"
      },
      {
        "text": "Problem with checkboxes",
        "href": "#checkboxes"
      },
      {
        "text": "Problem with single checkbox",
        "href": "#single-checkbox"
      },
      {
        "text": "Problem with conditionally-revealed input",
        "href": "#yes-input"
      },
      {
        "text": "Problem with radios with big heading",
        "href": "#radios-big-heading"
      },
      {
        "text": "Problem with input within large fieldset",
        "href": "#address-postcode"
      }
    ]
  }) }}

  <h1 class="govuk-heading-xl">Your details</h1>

  {{ govukInput({
    label: {
      "text": 'Label for input'
    },
    id: "input",
    name: "input",
    errorMessage: {
      "text": "Problem with input"
    }
  }) }}

  {{ govukTextarea({
    label: {
      "text": 'Label for textarea'
    },
    id: "textarea",
    name: "textarea",
    errorMessage: {
      "text": "Problem with textarea"
    }
  }) }}

  {{ govukSelect({
    label: {
      "text": 'Label for select'
    },
    id: "select",
    name: "select",
    errorMessage: {
      "text": "Problem with select"
    },
    items:[
      {
        text: 'Option one',
        value: 'one'
      },
      {
        text: 'Option two',
        value: 'two'
      }
    ]
  }) }}

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: 'Label for date input',
        classes: 'test-date-input-legend'
      }
    },
    id: 'dateinput',
    name: 'dateinput',
    errorMessage: {
      "text": "Problem with date input"
    },
    "items": [
      {
        "name": "day",
        "classes": "govuk-input--width-2 govuk-input--error"
      },
      {
        "name": "month",
        "classes": "govuk-input--width-2 govuk-input--error"
      },
      {
        "name": "year",
        "classes": "govuk-input--width-4 govuk-input--error"
      }
    ]
    })
  }}

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: 'Label for date input',
        classes: 'test-date-input2-legend'
      }
    },
    id: 'dateinput2',
    name: 'dateinput2',
    errorMessage: {
      "text": "Problem with date input year!"
    },
    "items": [
      {
        "name": "day",
        "classes": "govuk-input--width-2",
        "value": 5
      },
      {
        "name": "month",
        "classes": "govuk-input--width-2",
        "value": 12
      },
      {
        "name": "year",
        "classes": "govuk-input--width-4 govuk-input--error"
      }
    ]
    })
  }}

  {{ govukFileUpload({
    label: {
      "text": 'Label for file upload'
    },
    id: "file",
    name: "file",
    errorMessage: {
      "text": "Problem with file"
    }
  }) }}

  {{ govukFileUpload({
    label: {
      "text": 'Label for enhanced file upload'
    },
    id: "file-enhanced",
    name: "file-enhanced",
    errorMessage: {
      "text": "Problem with file"
    },
    javascript: true
  }) }}

  {{ govukRadios({
    fieldset: {
      legend: {
        text: 'Legend for radios'
      },
      attributes: {
        id: 'test-radios'
      }
    },
    name: "radios",
    errorMessage: {
      "text": "Problem with radios"
    },
    items:[
      {
        text: 'Label for first radio button',
        value: 'one',
        id: 'radios'
      },
      {
        text: 'Label for second radio button',
        value: 'two'
      }
    ]
  }) }}

  {{ govukCheckboxes({
    fieldset: {
      legend: {
        text: 'Legend for checkboxes'
      },
      attributes: {
        id: 'test-checkboxes'
      }
    },
    name: "checkboxes",
    errorMessage: {
      "text": "Problem with checkboxes"
    },
    items:[
      {
        text: 'Label for first checkbox',
        value: 'one',
        id: "checkboxes"
      },
      {
        text: 'Label for second checkbox',
        value: 'two'
      }
    ]
  }) }}

  {{ govukCheckboxes({
    fieldset: false,
    name: "single-checkbox",
    errorMessage: {
      "text": "Problem with single checkbox"
    },
    items:[
      {
        text: 'Label for single checkbox',
        value: 'agree',
        id: 'single-checkbox'
      }
    ]
  }) }}

  {% set yesField %}
  {{ govukInput({
    label: {
      "text": 'Label for revealed text input'
    },
    id: "yes-input",
    name: "yes-input",
    errorMessage: {
      "text": "Problem with input"
    }
  }) }}
  {% endset %}

  {% set noField %}
  {{ govukInput({
    label: {
      "text": 'Label for revealed text input'
    },
    id: "no-input",
    name: "no-input",
    errorMessage: {
      "text": "Problem with input"
    }
  }) }}
  {% endset %}

  {{ govukRadios({
    "idPrefix": "conditional",
    "name": "conditional",
    "fieldset": {
      "legend": {
        "text": "Legend for conditionally revealed content"
      },
      "classes": "govuk-radios--error",
      attributes: {
        id: 'test-conditional-reveal'
      }
    },
    "error": true,
    "items": [
      {
        "value": "yes",
        "text": "Yes",
        "checked": true,
        "conditional": {
          "html": yesField
        }
      },
      {
        "value": "no",
        "text": "No",
        "conditional": {
          "html": noField
        }
      }
    ]
  }) }}

  {{ govukRadios({
    classes: "govuk-radios--inline",
    idPrefix: "radios-big-heading",
    name: "radios-big-heading",
    fieldset: {
      legend: {
        text: "Have you supplied orders signed in triplicate, sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters?",
        isPageHeading: true,
        classes: "govuk-fieldset__legend--xl test-radios-big-heading-legend"
      }
    },
    errorMessge: {
      text: "Select whether you have supplied orders meeting these criteria"
    },
    items: [
      {
        value: "yes",
        text: "Yes"
      },
      {
        value: "no",
        text: "No"
      }
    ]
  }) }}

  {% call govukFieldset({
    legend: {
      text: "What is your address?",
      classes: "govuk-fieldset__legend--xl",
      isPageHeading: true
    }
  }) %}

    {{ govukInput({
      label: {
        html: 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
      },
      id: "address-line-1",
      name: "address-line-1"
    }) }}

    {{ govukInput({
      label: {
        html: '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
      },
      id: "address-line-2",
      name: "address-line-2"
    }) }}

    {{ govukInput({
      label: {
        text: "Town or city"
      },
      classes: "govuk-!-width-two-thirds",
      id: "address-town",
      name: "address-town"
    }) }}

    {{ govukInput({
      label: {
        text: "County"
      },
      classes: "govuk-!-width-two-thirds",
      id: "address-county",
      name: "address-county"
    }) }}

    {{ govukInput({
      label: {
        text: "Postcode"
      },
      errorMessage: {
        text: "Enter a valid postcode"
      },
      classes: "govuk-input--width-10",
      id: "address-postcode",
      name: "address-postcode"
    }) }}

  {% endcall %}

  {{ govukButton({
    "text": "Continue"
  }) }}

</form>
{% endblock %}
